<template>
  <div style="height: 1000px">
    <div class="dashboard-text">
      <h3>欢迎用户: {{ name }}</h3>
      <h4 v-if="showRank">您在班级的排名为：第{{ rank }}名</h4>
    </div>
    <div v-if="showTable" style="margin-top: 20px">
      <el-form inline :model="form">
        <el-form-item label="试卷标题">
          <el-input v-model="form.title" placeholder="请输入试卷标题" />
        </el-form-item>
        <el-button type="primary" @click="search">查 询</el-button>
      </el-form>
      <el-table :data="table">
        <el-table-column label="标题" prop="title" />
        <el-table-column label="创建人" prop="userName" />
        <el-table-column label="考试科目" prop="subjectId">
          <template slot-scope="scope">
            <span v-for="item in subjects" :key="item.id">
              <span v-if="scope.row.subjectId == item.id">
                {{ item.name }}
              </span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="考试时间" prop="testTime" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="exam(scope.row)" size="mini" type="text"
              >考试</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import questionItemApi from "@/api/questionItem/questionItem";
import gradeApi from "@/api/grade/index";
import subjectApi from "@/api/subject/index";
import { EventBus } from "@/utils/eventBus";

export default {
  components: {},
  data() {
    return {
      showTable: false,
      table: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      form: {
        title: "",
      },
      showRank: false,
      rank: 0,
      subjects: [],
    };
  },
  computed: {
    ...mapGetters(["roles", "name"]),
  },
  methods: {
    search() {
      this.list(1);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.list(currentPage);
    },
    exam(params) {
      // questionItemApi.batchGet(params.id).then((res) => {
      //   console.log(res.data);
      // });
      this.$router.push({
        path: `/test/test`,
        query: { questionItemId: params.id, title: params.title },
      });
    },
    checkQuestionItems: async function () {
      this.list(1);
    },
    list: async function (currentPage) {
      const res = await questionItemApi.selectQuestionItems(
        this.form.title,
        currentPage,
        this.pageSize
      );
      this.total = res.data.total;
      this.table = res.data.records;

      if (this.total > 0) {
        this.showTable = true;
      }
    },
    getRank: async function () {
      const res = await gradeApi.getUserRank();
      this.rank = res.data;
      if (this.rank > 0) {
        this.showRank = true;
      }
    },
    getSubjects: async function () {
      const res = await subjectApi.getAll();
      this.subjects = res.data;
    },
  },
  created() {
    //如果是学生，会在这个界面检查该学员有哪些考卷需要做，并显示
    //如果是学生，需要查询出该名学生在该班级的平均分排名
    if (this.roles == "student") {
      this.checkQuestionItems();
      this.getRank();
      this.getSubjects();
    }
    EventBus.$on("refleshList", () => {
      this.checkQuestionItems();
    });
  },
  beforeDestroy() {
    EventBus.$off("refleshList"); // 清理监听器
  },
};
</script>

<style lang="scss" scoped>
.dashboard-text {
  margin-top: 20px;
}
</style>
